 
<script type="text/javascript" src="/public/libs/uploader/webuploader.min.js"></script> 
<link rel="stylesheet" type="text/css" href="/public/libs/uploader/webuploader.css">

<style>
.demo h3{line-height:40px; font-weight: bold;}
.file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
.file-item .info{overflow: hidden;}
.uploader-list{width: 100%; overflow: hidden;}
</style>

<div class="form-group"><label class="col-sm-2 control-label">{$form['title']}</label>
    <div class="col-sm-10">
        <span style="font-size:14px;"> 
            <div>
                <div id="fileList_{$form['name']}" class="uploader-list">
                    <div class="file-item thumbnail"> 
                        <img src="{$form.value}">
                        <div class="info"></div>
                    </div>
                </div>
                <div id="imgPicker_{$form['name']}" class="btn btn-default">选择图片</div>
                <input type="hidden" name="{$form['name']}" id="v_{$form['name']}" value="{$form['value']}">
            </div>
		</span> 
    </div>
</div>  
<script>
$(function(){ 
$btn = $('#imgPicker_{$form['name']}');
$btn.on('click', function () {
        if ($(this).hasClass('disabled')) {
            return false;
        }
        uploader.upload(); 
    });
});
//上传图片
 // 初始化Web Uploader
var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf: '/public/uploader/Uploader.swf',
    // 文件接收服务端。
    server: '/index.php/common/api/uploader',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: {
    id:$("#imgPicker_{$form['name']}"), // id
       multiple: false  // false  单选 
      }, 
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $list = $("#fileList_{$form['name']}"),
        $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');
    // $list为容器jQuery实例
    $list.append( $li );

    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        $img.attr( 'src', src );
    }, 100, 100 );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
            .appendTo( $li )
            .find('span');
    }

    $percent.css( 'width', percentage * 100 + '%' );
});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function( file,response) {
	$('#v_{$form['name']}').val(response.path);
	layer.msg(response.msg);
    $( '#'+file.id ).addClass('upload-state-done');
});

// 文件上传失败，显示上传出错。
uploader.on('uploadError', function( file) {
    var $li = $( '#'+file.id ),
        $error = $li.find('div.error');

    // 避免重复创建
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }
    layer.msg('上传失败');
    //$error.text('上传失败');
});

// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});
</script>
